<script lang="jsx" setup>
import { ref, watch } from 'vue';
import { Button, Input, message } from 'ant-design-vue';
import dayjs from 'dayjs';
import Modal from '@/components/common/modal.vue';
import Table from '@/components/common/table.vue';
import { downLoadExcel, post } from '@/service/api/api';

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => false
  }
});

const modelVisible = ref(props.visible);

const model = ref({
  time: null
});

const emit = defineEmits(['close']);
const tableRef = ref(null);

const column = ref([
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dictLabel',
    dataIndex: 'dictLabel',
    title: '项目名',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dictValue',
    dataIndex: 'dictValue',
    title: '目标值',
    align: 'center',
    width: 220,
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.dictValue}
          onChange={e => {
            record.dictValue = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    align: 'center',
    checked: true,
    width: 220,
    ellipsis: true
  },
  {
    key: 'updateTime',
    dataIndex: 'updateTime',
    title: '修改时间',
    align: 'center',
    width: 220,
    checked: true,
    ellipsis: true
  },
  {
    key: 'cz',
    dataIndex: 'cz',
    title: '操作',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100,
    customRender: ({ record }) => {
      return (
        <Button
          type="link"
          onClick={() => {
            post('/qms/electricalTest/singleTestProd/updateStandard', {
              ...record,
              updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
            }).then(({ data, error }) => {
              if (!error) {
                message.success('修改成功');
                tableRef.value.getData();
              }
            });
          }}
        >
          修改
        </Button>
      );
    }
  }
]);

const downloadLoading = ref(false);
function exportExcel() {
  downloadLoading.value = true;
  downLoadExcel(
    '/qms/fqc/check1/exportYieldRate',
    { date: model.value.time },
    `一检良率统计总表${model.value.time || dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`
  ).finally(() => {
    downloadLoading.value = false;
  });
}

function close() {
  modelVisible.value = false;
  emit('close');
}

watch(
  () => props.visible,
  val => {
    modelVisible.value = val;
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <Modal
    v-model:visible="modelVisible"
    title="查看一检良率丶漏铜率"
    height="80vh"
    width="80vw"
    :destroy-on-close="true"
    :centered="true"
    @close="close"
  >
    <div class="jl-main-page one-code-ascend min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
      <ACard :title="null" :bordered="false" class="search-card card-wrapper">
        <AForm
          :model="model"
          :label-col="{
            span: 5,
            md: 7
          }"
          class="search-form"
        >
          <div class="w-full flex">
            <ARow :gutter="[15, 8]" wrap class="w-full">
              <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="6">
                <AFormItem label="创建时间" name="time" class="m-0" :label-col="{}">
                  <ADatePicker
                    v-model:value="model.time"
                    picker="month"
                    class="min-form-control w-full"
                    value-format="YYYY-MM"
                  />
                </AFormItem>
              </ACol>
              <div class="flex">
                <AFormItem class="m-0">
                  <div class="w-full flex-y-center justify-end gap-12px">
                    <AButton
                      type="primary"
                      size="small"
                      ghost
                      class="mini-btn mr-8px"
                      :loading="downloadLoading"
                      @click="exportExcel"
                    >
                      <template #icon>
                        <icon-ic-round-download class="align-sub text-icon" />
                      </template>
                      <span class="ml-3px">导出</span>
                    </AButton>
                  </div>
                </AFormItem>
              </div>
            </ARow>
          </div>
        </AForm>
      </ACard>
      <Table
        ref="tableRef"
        :column="column"
        url="/qms/fqc/check1/selectStandard"
        :scroll="{ x: 'auto', y: 'auto' }"
        :is-pagination="false"
        auto-generate-uuid
        :show-row-selection="false"
      ></Table>
    </div>
    <template #footer>
      <div class="modal-footer">
        <AButton @click="close">关闭</AButton>
      </div>
    </template>
  </Modal>
</template>

<style></style>
